<template>
  <div class='container'>
    <el-card class="box-card" shadow="never" border="false">
<template #header>
    <div class="header">
      <span class="name" v-if="!form.id">试题录入</span>
       <span class="name" v-else>试题修改</span>
    </div>
    <el-divider/>
    <el-form :model="form" ref="form" :rules="rules" label-width="100px" >
  <el-form-item label="学科：" prop="userSubject">
                <el-select
                  style="width: 400px"
                   placeholder="请选择"
                  v-model="form.userSubject"
                  @change="chooseSubjectID"
                >
                 <el-option
                    v-for="item in form.subjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
               <el-form-item label="目录：" prop="usercatalog">
                <el-select
                  style="width: 400px"
                   placeholder="请选择"
                  v-model="form.usercatalog"
                >
                 <el-option
                    v-for="item in form.catalog"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
                   <el-form-item label="企业：" prop="userCompanys">
                <el-select
                  style="width: 400px"
                   placeholder="请选择"
                  v-model="form.userCompanys"
                >
                 <el-option
                    v-for="item in form.companys"
                    :key="item.id"
                    :label="item.company"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
                 <el-form-item label="城市：" prop="userCitys">
                  <el-select
                  style="width: 198px"
                  filterable
                  v-model="form.province"
                  @change="chooseCity"
                >
                  <el-option
                    v-for="item in citySelect.cityList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                  <el-select
                  style="width: 198px; margin-left:4px"
                  filterable
                  v-model="form.city"
                >
                  <el-option
                    v-for="item in citySelect.cityDate"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
                    <el-form-item label="方向：" prop="userDirection">
                <el-select
                  style="width: 400px"
                   placeholder="请选择"
                  v-model="form.userDirection"
                >
                 <el-option
                    v-for="(item,index) in form.directions"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
                 <el-form-item label="题型"
                            prop="userType">
                <el-radio-group v-model="form.userType">
                  <el-radio :label="1"
                            value="1">单选</el-radio>
                  <el-radio :label="2"
                            value="2">多选</el-radio>
                  <el-radio :label="3"
                            value="3">简答</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="难度:"
                            prop="userdifficulty">
                <el-radio-group v-model="form.userdifficulty">
                  <el-radio :label="1">简单</el-radio>
                  <el-radio :label="2">一般</el-radio>
                  <el-radio :label="3">困难</el-radio>
                </el-radio-group>
              </el-form-item>
               <el-form-item label="题干:"
                            prop="userTag" style="margin-bottom:100px"  v-model="form.content1">
                <quill-editor class="editor"
                              v-model="form.content1"
                               >
                </quill-editor>
              </el-form-item>
                 <el-form-item label="选项:" >
                <!-- 单选框 , 输入框 , 上传 -->
                <el-radio-group v-model="form.userCheck"   @change="hradioChange">
                  <div class="col"
                       v-for=" (item, index) in options "
                       :key="index">
                    <div class="row">

                      <el-radio :label="item.code"></el-radio>
                      <el-input v-model="item.title"></el-input>
                       <el-upload action=""
                                 class="avatar-uploader"
                                 :http-request="picUpload"
                                 :show-file-list="false">
                        <i
                           class="avater-text">上传图片</i>
                      </el-upload>
                    </div>
                  </div>
                </el-radio-group>
                <div class="row">
                  <el-button type="danger" disabled  >+增加选项与答案</el-button>
                </div>
              </el-form-item>
             <el-form-item label="解析视频:">
                <el-input v-model="form.videoURL"></el-input>
              </el-form-item>
               <el-form-item label="答案解析:"
                            prop="userAnswer"
                            >
                            <quill-editor class="editor"
                              v-model="form.userAnswer" >
                </quill-editor>
              </el-form-item>
              <el-form-item label="题目备注:" class="beizhu">
                <el-input type="textarea"
                          v-model="form.remarks"></el-input>
              </el-form-item>
                 <el-form-item label="试题标签:"
                            prop="userTag">
                <el-select v-if="form.id"
                           v-model="form.userTag"
                           placeholder="请选择试题标签"
                           multiple
                           filterable
                           allow-create
                           default-first-option>
                  <el-option v-for="(item, index) in form.userTag"
                             :key="index"
                             :label="item"
                             :value="item"></el-option>
                </el-select>
                <el-select
                 v-else
                           v-model="form.userTag"
                           placeholder="请选择试题标签"
                           multiple
                           filterable
                           allow-create
                           default-first-option>
                  <el-option v-for="(item, index) in form.tags"
                             :key="index"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
                   <el-form-item>
                <!-- 试题修改 修改按钮 -->
                <el-button type="success"
                           v-if="form.id"
                           @click="changeForm">确认修改</el-button>
                <!-- 试题录入 提交按钮 -->
                <el-button type="primary"
                           @click="goSubmit"
                        v-else
                           >确认提交</el-button>
              </el-form-item>
  </el-form>
  </template>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as simpleSubject } from '@/api/hmmm/subjects.js'
import { simple as simpleDirectorys } from '@/api/hmmm/directorys.js'
import { simple as simpleTags } from '@/api/hmmm/tags.js'
import { list as companysList } from '@/api/hmmm/companys.js'
import { direction } from '@/api/hmmm/constants.js'
import { add, detail, update } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      form: {
        id: this.$route.query.id,
        subjects: [],
        catalog: [],
        companys: [],
        directions: [],
        tags: [],
        remarks: '',
        province: '',
        userCitys: '',
        content1: '',
        userSubject: null,
        usercatalog: '',
        userCompanys: '',
        userDirection: '',
        userType: 1,
        userdifficulty: 1,
        userTag: [],
        userCheck: '',
        userAnswer: '',
        userCheckList: [],
        userOptions: []

      },
      rules: {
        userSubject: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        usercatalog: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        userCompanys: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        userCitys: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        userDirection: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        userType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        userdifficulty: [{ required: true, message: '请选择难度', trigger: 'blur' }],
        userAnswer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      },
      citySelect: {
        cityList: [],
        cityDate: []
      },
      options: [
        {
          code: 'A',
          isRight: 'false',
          title: '',
          imageUrl: ''
        },
        {
          isRight: 'false',
          title: '',
          code: 'B',
          imageUrl: ''
        },
        {
          isRight: 'false',
          code: 'C',
          title: '',
          imageUrl: ''
        },
        {
          isRight: 'false',
          code: 'D',
          title: '',
          imageUrl: ''
        }
      ]
    }
  },
  components: {
    quillEditor
  },
  created () {
    this.citySelect.cityList = provinces()
    this.getSubjectList()
    this.getCompanysList()
    this.form.directions = [...direction]
    if (this.form.id) {
      this.loadDetail()
    }
  },
  methods: {
    async chooseSubjectID () {
      const res = await simpleDirectorys()
      this.form.catalog = [...res.data]
      const res1 = await simpleTags()
      this.form.tags = res1.data
    },
    async getSubjectList () {
      const res = await simpleSubject()
      this.form.subjects = [...res.data]
    },
    async getCompanysList () {
      const res = await companysList()
      this.form.companys = [...res.data.items]
    },
    chooseCity (e) {
      this.citySelect.cityDate = citys(e)
    },
    async loadDetail () {
      try {
        const res = await detail(this.form)
        console.log(res.data)
        this.form.userSubject = res.data.subjectID
        this.form.usercatalog = res.data.catalogID
        this.form.userCompanys = res.data.enterpriseID
        this.form.province = res.data.province
        this.form.city = res.data.city
        this.form.userDirection = res.data.direction
        this.form.userType = +res.data.questionType
        this.form.userdifficulty = +res.data.difficulty
        // 题干
        this.form.content1 = res.data.question
        this.form.videoURL = res.data.videoURL
        this.form.userAnswer = res.data.answer
        this.form.remarks = res.data.remarks
        this.form.userTag.push(res.data.tags)
        // 选项
        this.form.userOptions = res.data.options
        // 多选框的数据回流
        this.form.userCheckList = this.form.userOptions.filter(item => item.isRight === 1).map(item => item.code)
        // 单选框的数据回流
        this.form.userCheck = this.form.userOptions.filter(item => item.isRight === 1).map(item => item.code)[0]
      } catch (err) {
        console.log(err)
      }
    },
    hradioChange (val) {
      this.form.userCheck = val
      // 2. 更改option数据项
      this.options.forEach(item => {
        if (item.code === val) {
          // 更改当前项的 isRight的值
          item.isRight = true
        } else {
          item.isRight = false
        }
      })
      // 将 isRight为true 的数组 进行筛选出来
      // 将数组赋值给数据项
      this.form.userOptions = this.options.filter(item => item.isRight === true)
    },
    async picUpload (fileObj) {
      const fd = new FormData()
      // 将选中的图片添加到fd对象中
      fd.append('photo', fileObj.file)
    // 发送请求
    },
    // 确认修改
    async changeForm () {
      try {
        // await this.$refs.form.validate()
        const data = {
          subjectID: this.form.userSubject,
          catalogID: this.form.usercatalog,
          enterpriseID: this.form.userCompanys,
          city: this.form.city,
          province: this.form.province,
          direction: this.form.userDirection,
          questionType: '' + this.form.userType,
          answer: this.form.userAnswer,
          difficulty: '' + this.form.userdifficulty,
          question: this.form.content1,
          options: this.form.userOptions,
          tags: '' + this.form.userTag,
          id: +this.form.id,
          videoURL: this.form.videoURL === null ? '1' : this.form.videoURL,
          remarks: this.form.remarks === null ? '1' : this.form.videoURL
        }
        await update(data)
        this.$message.success('修改成功')

        this.$router.push('list')
      } catch (error) {

      }
    },
    // 确认添加试题
    async goSubmit () {
      try {
        // await this.$refs.form.validate()
        const data = {
          subjectID: this.form.userSubject,
          catalogID: this.form.usercatalog,
          enterpriseID: this.form.userCompanys,
          city: this.form.city,
          province: this.form.province,
          direction: '' + this.form.userDirection,
          questionType: '' + this.form.userType,
          answer: this.form.userAnswer,
          difficulty: '' + this.form.userdifficulty,
          question: this.form.content1,
          options: this.form.userOptions,
          tags: +this.form.userTag
        }
        await add(data)
        this.$message.success('添加成功')

        this.$router.push('list')
      } catch (error) {
        console.log(error)
      }
    }
  }

}
</script>

<style scoped lang='less'>
/deep/ .beizhu{
  margin-top:100px ;
}
 /deep/.ql-editor {
  margin-bottom:50px ;
}

/deep/ .el-alert--info.is-dark{
  background-color: #f4f4f5;
  color:#909399
}
/deep/ .el-table th {
  background-color: #fafafa;
}
.box-card{
  margin: 10px auto;
  width: 95%;
  padding: 20px;
  border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
     .pagination{
  margin-top: 10px;
  float: right;
 }

}
 .header{

  margin-bottom: 10px;
  /deep/ .name{
    font-weight: 999;
    color: #626066;
  }
  .search{
  width: 200px;
  margin: 10px;
 }
 }
 .ql-editor {
  height: 200px;
}
.option_item {
  padding-bottom: 20px;
}

.el-input {
  width: 300px;
}
/* // 上传图片 */
.avatar-uploader .el-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: 0;
}
.avatar-uploader {
  text-align: center;
  margin-left: 10px;
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 60px;
  line-height: 60px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avater-text {
  font-size: 14px;
  color: #8c939d;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.editor{
  height: 200px;

}
</style>
